<template>
    <div class="problem-type">
        <ModalTitle title="高发问题类型TOP5">
            <!-- <template>
                <div class="btn">
                    <div class="event" :class="{ 'select': type == 1 }" @click="eventClick(1)">事件</div>
                    <div class="part-piece" :class="{ 'select': type == 2 }" @click="eventClick(2)">部件</div>
                </div>
            </template> -->
        </ModalTitle>
        <div class="kaohe-box">
            <div class="kaohe-box-list" v-for="(item, Index) in topFiveList">
                <!-- 图片排名 -->
                <div class="icon">
                    <img class="image" :src="iconList[Index]" alt="">
                </div>
                <span>{{ item.name }}</span>
                <!-- 进度条 -->
                <div class="progress">
                    <p :style="{ width: item.proportion }"></p>
                </div>
                <span>{{ item.value }}</span>
            </div>
        </div>
    </div>
</template>

<script>
// 高发问题类型TOP5
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZongHeZhiFaDB } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            type: 1,
            iconList: [require('../../../../assets/images/zhangzi/home/one.png'), require('../../../../assets/images/zhangzi/home/two.png'), require('../../../../assets/images/zhangzi/home/three.png'), require('../../../../assets/images/zhangzi/home/four.png'), require('../../../../assets/images/zhangzi/home/five.png'),],
            topFiveList: [],
        }
    },
    mounted() {
        this.getProblemType()
    },
    methods: {
        // 点击切换类型
        eventClick(T) {
            this.type = T
        },
        // 获取问题类型top5
        async getProblemType() {
            const res = await ZongHeZhiFaDB.problemTypeAPI()
            if (res.success) {
                this.topFiveList = res.data
            } else {
                this.$message.error(res.message)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.problem-type {
    width: 100%;
    height: 34.2rem;

    .btn {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 12.7rem;
        height: 100%;

        .event,
        .part-piece {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 5.6rem;
            height: 2.8rem;
            background-image: url('../../../../assets/images/zhangzi/home/unselect.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-size: 1.6rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9BA6B5;
            cursor: pointer;
        }

        .select {
            background-image: url('../../../../assets/images/zhangzi/home/select.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            font-size: 1.6rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #DCE8EF;
        }
    }

    .kaohe-box {
        width: 100%;
        height: calc(100% - 3.8rem);
        margin-top: 2rem;
        overflow: auto;

        .kaohe-box-list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 2rem;

            &:last-child {
                margin-bottom: 0;
            }

            .icon {
                width: 2.6rem;
                height: 2.6rem;

                .image {
                    width: 100%;
                    height: 100%;
                }
            }

            span {
                display: inline-block;
                font-size: 1.6rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #C0D3D6;

                &:nth-child(1) {
                    color: #25E3FF;
                    width: 30.5rem;
                    overflow: hidden;
                }

                &:nth-child(2) {
                    width: 6.4rem;
                    overflow: hidden;
                    margin: 0 0 0 1rem;
                }

                &:nth-child(4) {
                    color: #25E3FF;
                }
            }

            .progress {
                flex: 1;
                height: 0.5rem;
                background: rgba(0, 0, 0, 0.2);
                margin: 0 1rem;

                p {
                    width: 50%;
                    height: 0.5rem;
                    background: #00D6FB;
                }
            }
        }
    }
}
</style>